<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>云链AI文档 - AI摘要</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    .hover-scale {
      transition: transform 0.2s;
    }
    .hover-scale:hover {
      transform: scale(1.02);
    }
  </style>
</head>
<body class="bg-gray-50 font-sans text-gray-700">

  <!-- 页面容器 -->
  <div class="flex h-screen">
    
    <!-- 左侧导航栏 -->
    <aside class="w-64 bg-white shadow-lg flex flex-col justify-between p-6 border-r border-gray-100">
      <div>
        <h1 class="text-2xl font-bold text-purple-600 mb-8 flex items-center">
          <span class="mr-2">📘</span> 云链AI文档
        </h1>
        <ul class="space-y-4 text-sm">
          <li>
            <a href="/upload.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">🏠</span> 首页
            </a>
          </li>
          <li>
            <a href="/summary.html" class="flex items-center p-3 rounded-lg bg-purple-50 text-purple-600 font-medium">
              <span class="mr-3">🤖</span> AI摘要
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📖</span> 阅读记录
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📋</span> 笔记管理
            </a>
          </li>
          <li>
            <a href="/space.html" class="flex items-center p-3 rounded-lg hover:bg-purple-50 hover:text-purple-600 transition-colors">
              <span class="mr-3">📂</span> 文档空间
            </a>
          </li>
        </ul>
      </div>
    </aside>

    <!-- 主内容区 -->
    <main class="flex-1 p-8 relative bg-gray-50">
      <div class="max-w-7xl mx-auto">
        <!-- 顶部导航 -->
        <div class="flex justify-end items-center mb-8">
          <button class="text-sm text-gray-600 hover:text-purple-600 transition-colors">📄 摘要记录</button>
        </div>

        <!-- 搜索区域 -->
        <section class="text-center">
          <h2 class="text-3xl font-bold text-gray-800 mb-4">
            AI搜索 <span class="text-purple-600">查文献</span>，找资料
          </h2>
          <p class="text-gray-500 mb-8">智能解析文献内容，快速获取关键信息</p>

          <!-- 搜索框和标签 -->
          <div class="max-w-3xl mx-auto">
            <!-- 搜索框 -->
            <div class="flex gap-4 mb-8">
              <div class="relative flex-1">
                <input type="text" placeholder="输入关键词、论文标题、作者等..." 
                  class="w-full border rounded-lg pl-4 pr-12 py-2.5 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all shadow-sm"/>
                <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-purple-500">
                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                  </svg>
                </button>
              </div>
              <button class="bg-purple-600 text-white px-6 py-2.5 rounded-lg hover:bg-purple-700 transition-colors shadow-sm hover:shadow-md">
                搜索
              </button>
            </div>

            <!-- 分类标签 -->
            <div class="flex justify-center gap-4 mb-8">
              <button class="px-4 py-2 rounded-full bg-purple-100 text-purple-600 hover:bg-purple-200 transition-colors">学术</button>
              <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">文库</button>
              <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">财报</button>
              <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">资讯</button>
              <button class="px-4 py-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">公众号</button>
            </div>

            <!-- 热门标签 -->
            <div class="flex flex-wrap justify-center gap-2 text-sm">
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                人工智能
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                计算机视觉与模式识别
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                数据结构与算法
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                代数拓扑
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                投资组合管理
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                神经元与认知
              </span>
              <span class="px-3 py-1 bg-purple-50 text-purple-600 rounded-full cursor-pointer hover:bg-purple-100 transition-colors">
                统计金融学
              </span>
            </div>
          </div>

          <!-- 搜索结果区域 -->
          <div class="mt-12 max-w-4xl mx-auto text-left space-y-6">
            <!-- 搜索结果项 -->
            <div class="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-all hover-scale">
              <div class="flex items-start justify-between">
                <h3 class="text-lg font-medium text-gray-900">
                  《The Governance of Physical Artificial Intelligence》
                </h3>
                <span class="text-red-500 text-sm font-medium">pdf</span>
              </div>
              <div class="mt-2 text-sm text-gray-600">
                <span>Yingbo Li</span>
                <span class="mx-2">·</span>
                <span>Anamaria-Beatrice Spulber</span>
                <span class="mx-2">·</span>
                <span>2023-04-06</span>
              </div>
              <p class="mt-2 text-sm text-gray-500">
                Physical artificial intelligence can prove to be one of the most important challenges of the artificial intelligence. The governance of physical artificial intelligence would define its responsible intelligent application in the society.
              </p>
              <button class="mt-4 text-purple-600 text-sm font-medium hover:text-purple-700 transition-colors">
                AI解析阅读 →
              </button>
            </div>

            <!-- 更多搜索结果可以复制上面的结果项结构 -->
          </div>
        </section>
      </div>
    </main>
  </div>

  <script>
    // 分类标签切换
    const categoryButtons = document.querySelectorAll('[class*="rounded-full"]');
    categoryButtons.forEach(button => {
      button.addEventListener('click', () => {
        // 重置所有按钮样式
        categoryButtons.forEach(btn => {
          btn.classList.remove('bg-purple-100', 'text-purple-600');
          btn.classList.add('bg-gray-100', 'text-gray-600');
        });
        // 设置当前按钮样式
        button.classList.remove('bg-gray-100', 'text-gray-600');
        button.classList.add('bg-purple-100', 'text-purple-600');
      });
    });
  </script>

</body>
</html> 